import React from 'react'
import { Image, NavBar, Toast, ActionBar } from 'react-vant';
import { CartO, ChatO, ShopO } from '@react-vant/icons';
import { useLocation, useNavigate } from "react-router-dom"
import { useDispatch, useSelector } from "react-redux";
import { Tabs } from 'react-vant';
function Detail(props:any) {
    const location = useLocation()
    const navigate = useNavigate()
    const dispatch = useDispatch()
    const myobj = location.state as any;
    console.log(myobj);

    return (
        <div>
            <NavBar
                title="详情页"
                leftText="返回"
                onClickLeft={() => navigate("/")}
                // rightText={<Search fontSize={20} />}
                onClickRight={() => Toast('按钮')}
            />
            <Image width="370" height="300" src={myobj.img} />
            <p style={{ fontWeight: "700", fontSize: "20px" }}>{myobj.name}</p>
            <p>{myobj.title}</p>
            
          <button style={{ width:'150px',height:'50px',background:'green',border:'none',color:'#fff',marginLeft:'100px'}}>开始游戏</button>
          <Tabs active={0}>
      {['游戏简介', '评论', '下载'].map((item) => (
        <Tabs.TabPane key={item} title={`${item}`}>
          {item}
        </Tabs.TabPane>
      ))}
    </Tabs>
        </div>
    )
}

export default Detail